<template>
    <div class="container">
        <van-nav-bar title="登录" left-arrow @click-left="backClick()"></van-nav-bar>
        <van-cell-group style="margin-top: 32px;">
            <van-field @input="changeField()" v-model="phone" type="tel" clearable placeholder="请输入手机号">
            </van-field>
            <van-field @input="changeField()" v-model="sms" type="number" center clearable placeholder="短信验证码">
                <van-button @click="getValidate()" :disabled="validate_disabled" slot="button" size="small"
                            type="primary">{{buttonText}}
                </van-button>
            </van-field>
        </van-cell-group>

        <div class="section" style="margin-top: 24px;">
            <button @click="loginClick" :disabled="loginDisabled" class="btn-primary">立即登录</button>
        </div>
    </div>
</template>

<script>
    import api from '../net/api'
    import url from '../net/url'
    import qs from 'qs';


    export default {
        name: "Login",
        data() {
            return {
                phone: "",
                sms: "",
                buttonText: "获取验证码",
                validate_disabled: true,
                count: 90,
                loginDisabled: true
            }
        },
        methods: {
            backClick() {
                this.$router.goBack();
            },
            changeField() {
                this.checkPhone();
                this.checkSubmit(false);
            },

            checkSubmit(showTips) {
                let test = /^(0|86|17951)?(13[0-9]|15[012356789]|166|17[3678]|18[0-9]|14[57])[0-9]{8}$/
                if (!test.test(this.phone)) {
                    this.loginDisabled = true
                    if (showTips) {
                        this.$toast('手机号不正确')
                    }
                    return false
                }

                if (!this.sms) {
                    this.loginDisabled = true
                    if (showTips) {
                        this.$toast('请输入验证码')
                    }
                    return false;
                }
                this.loginDisabled = false;

            },
            checkPhone() {
                let test = /^(0|86|17951)?(13[0-9]|15[012356789]|166|17[3678]|18[0-9]|14[57])[0-9]{8}$/
                if (!test.test(this.phone)) {
                    this.validate_disabled = true
                } else {
                    this.validate_disabled = false
                }
            },

            loginClick() {
                this.$toast.loading({
                    duration: 0,
                    forbidClick: true, // 禁用背景点击
                    loadingType: 'spinner',
                    message: '正在登录'
                })
                api.post(url.LOGIN_URL, qs.stringify({
                    code: this.sms,
                    registerid: 'OXJAqudpck2QjN8lN8vvqBYztddpFhHB',
                    uid: this.phone
                })).then(res => {
                    this.$toast.clear();
                    this.$toast.success('登录成功');
                    let userInfo = res.data;
                    this.$store.commit('saveUserInfo', {userInfo: userInfo});
                    this.$store.dispatch('socketLogin');
                    this.$router.goBack();

                }).catch(error => {
                    this.$toast(error)
                })
            },

            getValidate() {
                this.$toast.loading({
                    duration: 0,
                    forbidClick: true, // 禁用背景点击
                    loadingType: 'spinner',
                    message: '加载中'
                })
                api.get(url.GET_CODE, {num: this.phone}).then(res => {
                    this.$toast.clear();
                    this.$toast.success(res.msg)
                    this.countDown()
                }).catch(error => {
                    this.$toast(error)
                })
            },
            countDown() {
                this.buttonText = `${this.count}s后重新获取`
                this.validate_disabled = true;
                let timer = setInterval(() => {
                    this.count--;
                    if (this.count == 0) {
                        this.buttonText = '获取验证码'
                        clearInterval(timer);
                        this.count = 90;
                        this.checkPhone();
                    } else {
                        this.buttonText = `${this.count}s后重新获取`
                    }
                }, 1000)
            }
        }
    }
</script>

<style scoped lang="less">
    .container {
        background: #f2f2f2;
    }

</style>